<template>
  <HomePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
    <ul class="goods-list">
      <li v-for="item in newproductdata" :key="item.id" >
        <RouterLink to="/" @click="showDetail(item.id)">
          <div class="goods-item">
            <img :src="item.picture" alt="" />
            <div class="info">
              <p class="name">{{ item.name }}</p>
              <p class="desc">{{ item.description }}</p>
              <p class="price">
                <span class="new">¥{{ item.price *0.8}}</span>
                <span class="old">¥{{ item.price }}</span>
              </p>
              <span class="discount"> 8 折</span>
            </div>
          </div>
        </RouterLink>
      </li>
    </ul>
  </HomePanel>

  <!-- 商品详情弹窗 -->
  <el-dialog v-model="isShowDetail" width="800px" :title="title_name">
    <GoodsDetail ref="goodsForm" :currentid="currentid" />
   </el-dialog>
  
  
</template>
<script setup>
import { ref ,reactive,onMounted} from 'vue'
import { getCategoryList,getGoodsList} from '../../../api'
import HomePanel from './HomePanel.vue'
import GoodsDetail from './GoodsDetail.vue'
const utildata=ref([])
const newproductdata=ref([])
const goodsForm = ref();
const title_name=ref()
onMounted(()=>{
  loadNewProducr()
})
const loadNewProducr =async() => {
  const cate_data=await getCategoryList();
  utildata.value=cate_data.filter((item)=>item.pid===37)
  const data=await getGoodsList();
  newproductdata.value=data.filter((item)=>!utildata.value.includes(item)).slice(-4)
}

// 控制弹窗显示
const isShowDetail = ref(false)
// 当前选中的商品
const currentid = reactive({
  id:"",
  isnew:true
})

const showDetail = (id) => {
  if (goodsForm.value) {
    goodsForm.value.resetForm(id);
  }
  currentid.id = id,
  isShowDetail.value = true;
  title_name.value=newproductdata.value.filter(item=>item.id===id)[0].name
}

</script>



<style scoped lang='scss'>
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 406px;

  li {
    width: 306px;
    height: 406px;
    background: #fff;
    transition: all .5s;
    border-radius: 8px;
    overflow: hidden;

    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }

    .goods-item {
      position: relative;
      padding: 20px;
    }

    img {
      width: 266px;
      height: 266px;
      object-fit: cover;
      border-radius: 4px;
    }

    .info {
      padding: 15px 0;
    }

    .name {
      font-size: 18px;
      color: #333;
      margin-bottom: 8px;
    }

    .desc {
      font-size: 14px;
      color: #999;
      margin-bottom: 8px;
    }

    .price {
      display: flex;
      align-items: baseline;
      gap: 8px;

      .new {
        font-size: 22px;
        color: $priceColor;
        font-weight: bold;
      }

      .old {
        font-size: 14px;
        color: #999;
        text-decoration: line-through;
      }
    }

    .discount {
      position: absolute;
      top: 20px;
      right: 20px;
      background: $priceColor;
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 14px;
    }
  }
}
</style>